<!DOCTYPE html>  
<html>  
    <head>  
		<meta charset="utf-8" />  
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
		<title>HTML5测试</title>  
		<style>
				@-webkit-keyframes 'left-in'{  
					0% {  
						visibility:visible;  
						left: -100%;  
					}  
					100% {  
						visibility:visible;  
						left: 0%;  
					}  
					  
				}  
				@-webkit-keyframes 'right-out'{  
					0% {  
						visibility:visible;  
						left: 0%;  
					}  
					100% {  
						visibility:visible;  
						left: 100%;  
					}  
				}  
				@-webkit-keyframes 'left-out'{  
					0% {  
						visibility:visible;  
						left: 0%;  
					}  
					100% {  
						visibility:visible;  
						left: -100%;  
					}  
					  
				}  
				@-webkit-keyframes 'right-in'{  
					0% {  
						visibility:visible;  
						left: 100%;  
					}  
					100% {  
						visibility:visible;  
						left: 0%;  
					}  
				}  
				.right-in{  
					visibility:visible;  
					-webkit-animation-name: 'right-in';  
					-webkit-animation-duration: 1s;  
				}  
				.left-out{  
					visibility:hidden;  
					-webkit-animation-name: 'left-out';  
					-webkit-animation-duration: 1s;  
				}  
				.left-in{  
					visibility:visible;  
					-webkit-animation-name: 'left-in';  
					-webkit-animation-duration: 1s;  
				}  
				.right-out{  
					visibility:hidden;  
					-webkit-animation-name: 'right-out';  
					-webkit-animation-duration: 1s;  
					  
				}  
				.slide{  
					position: absolute;  
					top:0px;  
					left: 0px;  
					box-sizing: border-box;  
					width: 100%;  
					height: 100%;  
					background-color: white;  
				}  
				.slide-container{  
					position: relative;  
					width: 100%;  
					height: 500px;  
					margin: 0 auto;  
					padding: 1px;  
					overflow: hidden;  
				}  
				.slide-container:hover
				{
					cursor: pointer;
				}
				.slide-container:hover #div_shufflingShow
				{
					display:block
				}
				#div_shufflingShow
				{
					display: none;
				}
				.slide-img{  
					width: 100%;  
					height: 100%;  
				}  
				.slide-dec{  
					width: 100%;  
					white-space: nowrap;  
					text-overflow: ellipsis;  
					overflow: hidden;  
					position: relative;  
					top:-20%;  
					text-align: center;  
					color: #FFF;  
				}  
				#slide-tabs{  
					position: absolute;  
					top: 90%;  
					width: 100%;  
					height: 3%;  
					margin: 0 auto;  
					text-align: center;  
				}
				.div_shufflingShadow
				{
					height:100%;
					width:12%;
					position:absolute;
					
					background: linear-gradient(to right,rgb(54, 52, 52),rgb(202, 197, 197));
					filter: blur(5px);
					opacity: .5;
				}
				#i_left
				{
					top:40%;
					position:absolute;
					left:5%;
					position:absolute;
					font-size:50px;
					color:white;
				}
				#i_right{
					top:40%;
					position:absolute;
					right:5%;
					position:absolute;
					font-size:50px;
					color:white;
				} 
				.slide-tab{  
					position: relative;  
					display: inline-block;  
					height: 15px;  
					width: 15px;  
					border-radius: 50%;  
					background-color: #e0e0e0;  
					cursor: pointer;  
					margin-right: 2%;  
					
				}  
				.slide-tab:hover{  
					background-color: #FFFFFF;  
				}  
				.slide-tab-acitve{  
					background-color: #FFFFFF;  
				}  
				@media only screen and (max-width: 500px) {  
					.slide-tab{  
						height: 10px;  
						width: 10px;  
					}  
					.slide-container{  
						height: 200px;  
					}  
					.slide-dec{  
						font-size: 11px;  
					}  
				}  
			</style>
        <script type="text/javascript">  
                window.onload = function(){  
                    init_tabs();  
                }  
				var slide;  
var tabs;  
var slide_index;  
var interval;  
function init_tabs(){  
    slide = document.getElementsByClassName("slide");  
    slide_index = slide.length-1;  
    var tabc = document.getElementById("slide-tabs");  
    var html = "";  
    for(var i=0;i<slide.length;i++){  
        html+='<span class="slide-tab" onclick="slide_x('+i+')" > </span>';  
    }  
    tabc.innerHTML=html;  
    tabs=tabc.childNodes;  
    tabs[slide_index].className = addCls(tabs[slide_index].className,"slide-tab-acitve");  
    cInterval();  
}  
function pInterval(){  
    clearInterval(interval);  
    interval = -1;  
}  
function cInterval(){  
    if(interval!=-1)clearInterval(interval);  
    interval = setInterval("auto_next()",3000);  
}  
function auto_next(){  
    slide_out(slide_index);  
    slide_index=(slide_index-1+slide.length)%slide.length;  
    slide_in(slide_index);  
}  
function slide_out(i){  
    slide[i].className=remCls(slide[i].className,'right-in');  
    slide[i].className=remCls(slide[i].className,'left-in');  
    slide[i].className=addCls(slide[i].className,'right-out');  
    tabs[i].className = remCls(tabs[i].className,"slide-tab-acitve");  
}  
function slide_in(i){  
    slide[i].className=remCls(slide[i].className,'left-out');  
    slide[i].className=remCls(slide[i].className,'right-out');  
    slide[i].className=addCls(slide[i].className,'left-in');  
    tabs[i].className = addCls(tabs[i].className,"slide-tab-acitve");  
}  
function slide_x(x){  
    pInterval();  
    x=x%slide.length;  
    slide_out(slide_index);  
    slide_in(x);  
    slide_index=x;  
    cInterval();  
}  
function remCls(o,n){  
    if(o==null||typeof(o)!='string')return o;  
    var x = o.indexOf(n);  
    if(x>-1){  
        if(x>0) o=o.replace(n,'');  
        else o=o.replace(" "+n,'');  
    }  
    return o;  
}  
function addCls(o,n){  
    if(o==null||typeof(o)!='string')return o;  
    if(o.length>0) o+=' '+n;  
    else o+=n;  
    return o;  
}  
function slide_next(){  
    var x=(slide_index-1+slide.length)%slide.length;  
    slide_x(x);  
}  
function slide_last(){  
    pInterval();  
    slide[slide_index].className=remCls(slide[slide_index].className,'left-in');  
    slide[slide_index].className=remCls(slide[slide_index].className,'right-in');  
    slide[slide_index].className=addCls(slide[slide_index].className,'left-out');  
    tabs[slide_index].className = remCls(tabs[slide_index].className,"slide-tab-acitve");  
      
    slide_index=(slide_index+1)%slide.length;  
      
    slide[slide_index].className=remCls(slide[slide_index].className,'left-out');  
    slide[slide_index].className=remCls(slide[slide_index].className,'right-out');  
    slide[slide_index].className=addCls(slide[slide_index].className,'right-in');  
    tabs[slide_index].className = addCls(tabs[slide_index].className,"slide-tab-acitve");  
    cInterval();  }
        </script>  
    </head>  
    <body>  
        <!-- 轮播容器 -->  
        <div class="slide-container">  
            <!-- 轮播组件  最后一个不用加right-out类-->  
            <div class="slide right-out">  
                <img src="img/homepic1.jpg"class="slide-img"> 
            </div>  
            <div class="slide">  
                <img src="img/homepic2.jpg" class="slide-img">  
			</div>
			<div id="div_shufflingShow">
			<div class="div_shufflingShadow" style="left:0;"></div>
			    <i class="fa fa-angle-left" id="i_left"onclick="slide_last();"></i> 
			  
			<div  class="div_shufflingShadow" style="right:0"></div>
			<i class="fa fa-angle-right" id="i_right" onclick="slide_next()"></i>
			 
		   </div> 
            <!-- 导航点 -->  
			<div id="slide-tabs"></div>  
			
              
		</div>
        <!-- 轮播结束 -->  
       
    </body>  
</html>  



